<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .my-table {
        border: 2px solid #42b983;
        border-radius: 3px;
        background-color: #fff;
      }

      th {
        background-color: #42b983;
        color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        user-select: none;
      }

      td {
        background-color: #f9f9f9;
      }

      th,
      td {
        min-width: 120px;
        padding: 10px 20px;
      }

      .arrow {
        display: inline-block;
        width: 0;
        height: 0;
        border: 10px solid red;
        border-left-color: transparent;
        border-right-color: transparent;
        opacity: 0.3;
      }

      .arrow.asc {
        border-top-color: transparent;
      }

      .arrow.desc {
        border-bottom-color: transparent;
      }

      th.active {
        color: rgba(255, 255, 255, 1);
      }

      th.active .arrow {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <!-- 
      要做一个组件的思路大概是什么：
        1. 组件长什么样。
        2. 组件的数据来源，数据是组件自身的 data 数据，还是父组件传递过来的 prop 数据
        3. 组件是否有对外的一些事件（自定义事件）
        4. 组件是否需要插槽
     -->

    <div id="app">
      <input type="text" placeholder="请输入搜索关键字" v-model="query" />

      <!-- 使用 my-table 组件 -->
      <my-table
        :rows="table1Rows"
        :columns="table1Columns"
        :keyword="query"
        search-key="isOk"
      ></my-table>
    </div>

    <script src="../lib/vue.js"></script>
    <script type="text/x-template" id="my-table-temp">
      <table class="my-table">
        <thead>
          <tr>
            <th v-for="(col, index) in columns" :key="index" :class="{'active': col.key === sortBy}">
              {{ col.label }}

              <span v-if="col.sort" class="arrow" :class="order[col.key] === 1 ? 'asc' : 'desc'" @click="handleChange(col.key)">

              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in displayRows" :key="index">
            <td v-for="(col, colIndex) in columns" :key="colIndex">
              {{ row[col.key] }}
            </td>
          </tr>
        </tbody>
      </table>
    </script>
    <script>
      Vue.component("my-table", {
        template: "#my-table-temp",
        props: ["rows", "columns", "keyword", "searchKey"],
        data() {
          const initOrder = {};
          // 计算出需要参与排序的keys集合 ['time', 'en']
          const keys = this.columns
            .filter((item) => item.sort)
            .map((item) => item.key);

          keys.forEach((key) => {
            initOrder[key] = 1;
          });
          console.log("keys", keys, initOrder);

          return {
            // order: 1, // 表示当前的排序方式，-1 = desc  1 = asc
            // order: {
            //   time: 1,
            //   en: 1,
            // },
            // order 初始值可以通过 columns 这个prop来控制
            order: initOrder,
            sortBy: "", // 表示按照那个字段来排序
          };
        },
        computed: {
          displayRows() {
            // 依赖项目是 rows 与 order 与 keyword
            // 解构出来的，都是我需要的依赖
            const { rows, searchKey, order, sortBy, keyword } = this;

            return [...rows]
              .filter((item) => item[searchKey].includes(keyword))
              .sort((a, b) => {
                // if (order[sortBy] === 1) {
                //   return a[sortBy] - b[sortBy];
                // } else {
                //   return b[sortBy] - a[sortBy];
                // }
                return a[sortBy] === b[sortBy]
                  ? 0
                  : (a[sortBy] > b[sortBy] ? 1 : -1) * order[sortBy];
              });
          },
        },
        methods: {
          handleChange(key) {
            this.sortBy = key;
            // this.order *= -1;
            this.order[key] *= -1;
          },
        },
      });

      const vm = new Vue({
        el: "#app",
        data: {
          query: "", // 搜索关键字
          table1Rows: [
            { id: 1, name: "吃饭", isOk: "是", time: 1, en: 8, en2: "b" },
            { id: 2, name: "睡觉", isOk: "否", time: 3, en: 7, en2: "a" },
            { id: 3, name: "打豆豆", isOk: "否", time: 2, en: 9, en2: "c" },
          ],
          table1Columns: [
            {
              label: "待办事项", // 控制表头的列名
              key: "name", // 控制这一列使用行数据的什么字段来渲染
            },
            {
              label: "是否完成",
              key: "isOk",
            },
            {
              label: "耗时",
              key: "time",
              sort: true, // 表示当前列需要有排序的功能
            },
            {
              label: "耗时2",
              key: "en",
              sort: true,
            },
            {
              label: "英文",
              key: "en2",
              sort: true,
            },
          ],
        },
      });
    </script>
  </body>
</html>
